<template>
  <!-- 新增用户弹窗 -->
  <el-dialog
  title="创建用户"
  :visible="dialogVisible"
  width="40%"
  @close="closeDialog">
  <el-form :model="form" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <!-- 你这里 原先是反着的   你取个反就好了啊 那会真报错了-->
    <el-form-item label="密码" prop="password" v-if="!form.id">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="角色">
      <el-input v-model="form.role"></el-input>
    </el-form-item>
    <el-form-item label="权限组名称">
      <el-select v-model="form.permission_group_id" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.title"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="介绍">
      <el-input type="textarea" v-model="form.introduction"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import {addUser, permissionsList, userDeltail, updateUser} from '@/api/user'
export default {
  name: 'AddUser',
  props: {
    dialogVisible: {
      default: false,
      type: Boolean 
    }
  },
  data() {
    return {
      form: {
        //姓名
        username: '',//用户名
        email: '',//邮箱
        password: '',//密码
        role: '',//角色
        permission_group_id: '',//权限组
        phone: '', //电话
        introduction: '',//介绍
      },
      rules:{
        // 用户名m
        username: [ 
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        // 邮箱
        email: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
        // 
      },
      options: [
        {
          value: '2',
          label: '超级管理员组'
        }, {
          value: '3',
          label: '编辑组'
        }, 
      ]
    }
  },
  mounted() {
    this.getPermissions()
  },
  methods: {
    // 关闭弹窗 清空表单
    closeDialog() {
      // 子传父
      this.$emit('close-dialog')
       // 重置表单 校验规则resetFields
      this.$refs.addForm.resetFields()
      this.form =  {
        username: '',//用户名
        email: '',//邮箱
        password: '',//密码
        role: '',//角色
        permission_group_id: '',//权限组
        phone: '', //电话
        introduction: '',//介绍
      }
    },
    // 确认按钮
    confirm() {
      // 兜底检验
      this.$refs.addForm.validate(async(valid) => {
        // 校验 通过
        if(valid) {
          // 判断新增还是编辑
          if(this.form.id) {
            // 编辑 调更新接口
            const res = await updateUser(this.form)
            // console.log(res);
          }else{ 
            // 新增
            // 调接口
            await addUser(this.form) 
          }
           // 关闭弹窗
            this.$emit('close-dialog')
            // 更新列表信息
            this.$emit('get_list')
            // 提示用户
            // this.$message.success('新增成功')
            this.$message.success(`${this.form.id ? "更新成功" : "添加成功" } `)
        }
      })
    },
    // 权限组列表
    async getPermissions() {
      const res = await permissionsList()
      // console.log(res);
      this.options = res
    },
    // 根据id获取数据详情 数据回填
    async getDetail(id) {
      // 调接口
      const res = await userDeltail(id)
      console.log(res);
      // console.log(res);
      this.form = res
      // 一、查询详情后去除不必要数据防止 修改报错
      this.form.create_time = undefined
      this.form.last_update_time = undefined
    }
  }
}
// 看后端怎么要了  他这是个 put会根据你穿的id将你传进来的全部替换  或者只传你更改的字段+id
// 俺们是 post 根据id 修改  或者 
</script>

<style>

</style>